iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 23
0
自我挑戰組

從JS到React的前端入門實作系列 第 23

Day23:拆解組件(3)父祖件傳來的值來收尋文字

  • 分享至 

  • xImage
  •  

今日目的

今天利用父祖件接收傳進來的值來收尋文字,對了以下都是在App.js。/images/emoticon/emoticon07.gif

render()

由於code太多,我們分解這是主要炫覽畫面。

render() {
    const {searhItem}=this;
    
    return(
      <div>
       <Searchbar  onsearh ={searhItem}/> {/* 從子組件 接收onsearh事件 */}
      </div>
    );
  }

constructor()

資料定義的方面

constructor(props) {
    super(props);
    this.state = {
      data:[
        'apple',
        'banana',
        'orange',
        'purple',
        'seal',
        'egg',
        'mouse'
      ], 
      item:[],
    };//內部自定義的變數

  }

searhItem() 函數

這個用來收尋文字

  searhItem = (x) => { //拿到子組件的收尋文字
   
    let searhText = this.state.data.filter ((item)=>{
      return item.toLowerCase().indexOf(x.toLowerCase()) !== -1
    }); //代表有找到
    // console.log('searhText', searhText);

    if(searhText.length > 0  ){ //代表收尋陣列有值

      console.log("代表收尋陣列有值",searhText);
      this.setState({
        item:searhText //存到陣列
      })
  
    }

    if(searhText.length === 0 ){
      console.log("沒有值",this.state.searhitem);//空輸入
      this.setState({
        item:this.state.data//就把備份資料加入
      })

    }

    if(x === ''){ //還原備份
      console.log(" '' ",this.state.searhitem);//空字串
      this.setState({
        item:this.state.data//就把備份資料加入
      })
    }

  }

結果如下
https://ithelp.ithome.com.tw/upload/images/20191009/20115505Ly6FPC1dxm.png


參考資料:
自己


上一篇
Day22:拆解組件(2)傳遞資料給父祖件
下一篇
Day24:拆組組件(4),收尋文字放入另一個組件,並且新增輸入框
系列文
從JS到React的前端入門實作30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言